<template>
  <div class="app-container" style="display: flex;flex-direction: column;gap: 30px;">
    <!-- <div>
      <el-button type="danger" plain>Port异常上报</el-button>
    </div> -->
    <el-form :model="topParams" ref="topFormRef" label-width="100px" @submit.prevent>
      <el-form-item label="Port" prop="port" label-position="left">
        <el-select
          v-model="topParams.port"
          placeholder="请选择Port口"
          style="width: 175px;"
        >
          <el-option/>
        </el-select>
      </el-form-item>
      <el-form-item label="箱码" prop="boxCode" label-position="left">
        <el-input
          v-model="topParams.boxCode"
          placeholder="请扫描箱码"
          style="width: 175px;"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form :model="centerParams" ref="centerFormRef" label-width="100px" @submit.prevent>
      <div style="display: flex;gap: 30px;">
        <el-form-item label="Reel ID1" prop="reelId1" label-position="left">
          <el-input
            v-model="topParams.reelId1"
            placeholder="请扫描ReelID1"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在储格1" prop="position1" label-position="left">
          <el-input
            v-model="centerParams.position1"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务令" prop="orderNo" label-position="left">
          <el-input
            v-model="centerParams.orderNo"
            placeholder="请扫描箱码"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;gap: 30px;">
        <el-form-item label="Reel ID2" prop="reelId2" label-position="left">
          <el-input
            v-model="topParams.reelId2"
            placeholder="请扫描ReelID2"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在储格2" prop="position2" label-position="left">
          <el-input
            v-model="centerParams.position2"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;gap: 30px;">
        <el-form-item label="Reel ID3" prop="reelId3" label-position="left">
          <el-input
            v-model="topParams.reelId3"
            placeholder="请扫描ReelID3"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在储格3" prop="position3" label-position="left">
          <el-input
            v-model="centerParams.position3"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;gap: 30px;">
        <el-form-item label="Reel ID4" prop="reelId4" label-position="left">
          <el-input
            v-model="topParams.reelId4"
            placeholder="请扫描ReelID4"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在储格4" prop="position4" label-position="left">
          <el-input
            v-model="centerParams.position4"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-form :model="bottomParams" ref="bottomFormRef" label-width="100px" @submit.prevent>
      <div style="display: flex;gap: 30px;">
        <el-form-item label="目标位置" prop="destination" label-position="left">
          <el-select
            v-model="bottomParams.destination"
            placeholder="请选择目标位置"
            style="width: 175px;"
          >
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="目标箱号" prop="boxCode" label-position="left">
          <el-input
            v-model="bottomParams.boxCode"
            placeholder="请扫描箱码"
            style="width: 175px;"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup name="StockUp">
// import {  } from "@/api/work/sortTask"
const { proxy } = getCurrentInstance()
const route = useRoute()
const scanFlag = ref(true)
const list = ref([])
const total = ref(0)
const btn = reactive({
})
const scanInfo = ref({})
const data = reactive({
  queryParams: {
    orderNumber: null,
    pageNum: 1,
    pageSize: 10
  },
  form: {},
  topParams: {},
  centerParams: {},
  bottomParams: {},
  rules: {
  }
})

const { queryParams, topParams, centerParams, bottomParams, form, rules } = toRefs(data)


</script>

<style lang="scss" scoped>
</style>